<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width: 1000px;height: 300px;margin: 0 auto;position: relative;}
        .imgbox{position: absolute;}
        .imgbox img{width: 1000px;height:300px;float: left}

        .btns input{position: absolute;width: 40px;height: 40px;border: none;background: rgba(200,200,200,0.5);top:130px;}
        .btns input:active{background: #55f;color: #fff}
        #left{left:0}
        #right{right:0}
    </style>
</head>
<body>
    <div class="box">
    <div class="imgbox">
        <img src="" alt="" title="">
    </div>
    <div class="btns">
        <input type="button" id="left" value="<">
        <input type="button" id="right" value=">">
    </div>
</div>
</body>
<script src="./ajax.js"></script>
<script src="./move.js"></script>
<script>
    // document.onclick=function(){
    //     // 执行封装的ajax函数，感受Ajax的无刷新加载数据
    //     ajax({
    //         url:"http://localhost:3000/api",
    //         data:{
    //             type:"getBanner"
    //         },
    //         success:res=>{
    //             console.log(res)
    //         }
    //     })
    // }
    class Banner{
        constructor(){
            this.imgbox = document.querySelector(".imgbox")
            this.url = "http://localhost:3000/api";
            this.index = 0;
            // 8. 获取页面现有元素（左右按钮）
            this.left = document.getElementById("left");
            this.right = document.getElementById("right");
            // 获取数据
            this.getData();
            // 绑定事件
            this.addEvent();
        }
        getData(){
            ajax({
                url:this.url,
                data:{
                    type:"getBanner"
                },
                success:res => {
                    // 2. 解析数据
                    // 拿到数据先别急着转，先consol.log()看一下是什么数据类型
                    res = JSON.parse(res);
                    // console.log(res);
                    if(res.code === 1){
                        // 3. 保存指定数据
                        this.data = res.data;
                        // 4. 渲染页面
                        this.render();
                    }
                }
            })
        }
        render(){
            let str = "";
            for(let i=0;i<this.data.length;i++){
                str += `<img src="${this.data[i].src}" alt="${this.data[i].alt}" title="${this.data[i].title}">`;
            }
            // 为了无缝轮播，复制第一张图，放在最后
            const first = this.data[0];
            str += `<img src="${first.src}" alt="${first.alt}" title="${first.title}">`;

            // 6. 将拼接好的页面结构设置到指定容器
            this.imgbox.innerHTML = str;
            // 7. 完善布局
            this.imgbox.style.width = this.imgbox.children.length * this.imgbox.children[0].offsetWidth + "px";
        }
        changeIndex(d){
            // 如果传入的参数为0，执行点击左按钮的函数
            if(d === 0){
                if(this.index === 0){
                    this.index = this.imgbox.children.length-2;
                    this.imgbox.style.left = -(this.imgbox.children.length-1) * this.imgbox.children[0].offsetWidth + "px";
                }else{
                    this.index--;
                }
            }else{
                if(this.index === this.imgbox.children.length-1){
                    // 因为复制了第一张图片放在了最后，所以最后一张之后，要找到真正要显示的图片（第二张）
                    this.index = 1;
                    this.imgbox.style.left = 0;
                }else{
                    this.index++
                }
            }
            this.move();
        }
        move(){
            move(this.imgbox,{
                left: this.index * -this.imgbox.children[0].offsetWidth
            }) 
        }
        addEvent(){
            const that = this;
            this.left.onclick = function(){
                that.changeIndex(0)
            }
            this.right.onclick = function(){
                that.changeIndex(1)
            }
        }
    }
    new Banner();
</script>
</html>